<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>个人信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description"/>
    <meta content="Coderthemes" name="author"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- App favicon -->
    <link rel="shortcut icon" href="./assets/images/favicon.ico">

    <!-- App css -->
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/icons.min.css" rel="stylesheet" type="text/css"/>
    <link href="./css/app.css" rel="stylesheet" type="text/css"/>

    <style>
        .item div {
            margin-top: 10px;
        }
    </style>

</head>

<body>

<!-- Begin page -->
<div id="wrapper">

    <!-- ========== Left Sidebar Start ========== -->
    <div th:replace="commons/sideBar :: sidebar"/>
    <!-- Left Sidebar End -->

    <!-- ============================================================== -->
    <!-- Start Page Content here -->
    <!-- ============================================================== -->

    <div class="content-page">
        <div class="content">

            <!-- Topbar Start -->
            <div th:replace="commons/topBar :: topbar "/>
            <!-- end Topbar -->

            <!-- Start Content-->
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="#">首页</a></li>
                                    <li class="breadcrumb-item active">个人信息</li>
                                </ol>
                            </div>
                            <h4 class="page-title">个人信息</h4>
                        </div>
                    </div>
                </div>
                <!-- end page title -->
            </div>


            <div class="card" style="width: 700px; height: 800px">

                <div class="card-body">

                    <h4 class="mb-3 header-title">我的资料</h4>

                    <form class="form-horizontal">
                        <form method="post" action="/uploadFile" id="imgForm" th:action="@{/upload}"
                              enctype="multipart/form-data">
                            <img src="./images/baobao.png" th:src="${session.loginStu.headImg}" id="stuHeadImg"
                                 alt="图片获取错误" class="rounded-circle" width="150px" height="150px">
                            <div class="form-group row mb-3" style="margin-top: 15px">
                                <label for="file_input" class="col-3 col-form-label">修改头像：</label>
                                <div class="col-6">
                                    <input type="file" name="file" id="file_input" class="form-control"
                                           style="width: 220px;">
                                </div>
                                <button type="button" id="changeHeadImg_btn" class="btn btn-info">上传</button>
                            </div>
                        </form>
                        <div class="form-group row mb-3">
                            <label class="col-3 col-form-label">姓名：</label>
                            <div class="col-6">
                                <input th:value="${session.loginStu.stuName}" class="form-control" disabled
                                       placeholder="">
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label  class="col-3 col-form-label">学号：</label>
                            <div class="col-6">
                                <input class="form-control" disabled th:value="${session.loginStu.stuId}"
                                       placeholder="">
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label  class="col-3 col-form-label">班级：</label>
                            <div class="col-6">
                                <input class="form-control" disabled th:value="${session.loginStu.classes}"
                                       placeholder="">
                            </div>
                        </div>
                        <div class="form-group row mb-3">
                            <label  class="col-3 col-form-label">密码：</label>
                            <div class="col-6">
                                <input class="form-control" disabled placeholder="******">
                            </div>
                            <button type="button" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat"
                                    class="btn btn-info">修改
                            </button>
                        </div>
                        <div class="form-group row mb-3">
                            <label  class="col-3 col-form-label">个性签名：</label>
                            <div class="col-6">
                                <input class="form-control" id="oldSignature" disabled th:value="${session.loginStu.signature}"
                                       placeholder="">
                            </div>
                            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#signatureModal"
                                    data-whatever="@mdo">修改
                            </button>
                        </div>
                        <div class="form-group row mb-3">
                            <label  class="col-3 col-form-label">我的爱好：</label>
                            <div class="col-6">
                                <input class="form-control" id="oldHobby" disabled th:value="${session.loginStu.hobby}"
                                       placeholder="">
                            </div>
                            <button  type="button" class="btn btn-info" data-toggle="modal" data-target="#hobbyModal"
                                    data-whatever="@mdo">修改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Footer Start -->
<div th:replace="commons/footer :: foot"></div>
<!-- end Footer -->

<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->


<!--修改密码模态框-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="oldPwd" class="control-label">旧密码:</label>
                        <input type="password" name="oldPwd" class="form-control" id="oldPwd">
                    </div>
                    <div class="form-group">
                        <label for="newPwd" class="control-label">新密码:</label>
                        <input type="password" class="form-control" name="newPwd" id="newPwd">
                    </div>
                    <div class="form-group">
                        <label for="repeatNewPwd" class="control-label">重复密码:</label>
                        <input type="password" class="form-control" name="repeatNewPwd" id="repeatNewPwd">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="closeModel" class="btn btn-danger" data-dismiss="modal">关闭</button>
                <button type="button" id="changePwdBtn" disabled="disabled" class="btn btn-primary">确认修改</button>
            </div>
        </div>
    </div>
</div>

<!--修改签名模态框-->
<div class="modal fade" id="signatureModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="signature" class="control-label">个性签名:</label>
                        <input type="text" th:value="${session.loginStu.signature}" class="form-control" id="signature">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="signatureCloseBtn" class="btn btn-danger" data-dismiss="modal">关闭</button>
                <button type="button" id="updateSignatureBtn" class="btn btn-primary">修改</button>
            </div>
        </div>
    </div>
</div>

<!--修改我的爱好模态框-->
<div class="modal fade" id="hobbyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="signature" class="control-label">爱好:</label>
                        <input type="text"  th:value="${session.loginStu.hobby}" class="form-control" id="hobby">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="hobbyCloseBtn" class="btn btn-danger" data-dismiss="modal">关闭</button>
                <button type="button" id="updateHobbyBtn" class="btn btn-primary">修改</button>
            </div>
        </div>
    </div>
</div>


<!-- App js -->
<script src="./js/vendor.js"></script>
<script src="./js/app.js"></script>


<!-- Plugins js -->
<script src="./js/vendor/Chart.bundle.js"></script>
<script src="./js/vendor/jquery.sparkline.min.js"></script>
<script src="./js/vendor/jquery.knob.min.js"></script>
<script src="./js/jquery-2.1.1.min.js"></script>
<script src="./js/pages/dashboard.init.js"></script>
<script src="./js/layer/layer.js"></script>

<script>
    $("#changeHeadImg_btn").click(function () {
        var formdata = new FormData();
        formdata.append("file", $('#file_input')[0].files[0]);
        $.ajax({
            type: "POST",
            url: "/stuInfoSystem/uploadHeadImg",
            data: formdata,
            contentType: false, // 不设置内容类型
            processData: false, // 不处理数据
            dataType: "text",
            success: function (data) {
                if ("failed" === data) {
                    layer.msg('修改失败,您选择的不是一张图片！', {icon: 5, time: 700});
                    return;
                }
                // 请求成功后要执行的代码
                layer.msg('修改成功!', {icon: 6, time: 700});
                $("#topBarHeadImg").attr("src", data);
                $("#stuHeadImg").attr("src", data);
            },
            error: function (data) {
                // 请求失败后要执行的代码
                layer.msg('服务器错误,修改失败!', {icon: 5, time: 700});
            }
        });
    });
</script>
<script>
    var old_flag = false;
    var new_flag = false;
    var reNew_flag = false;

    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever') // Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        modal.find('.modal-title').text('New message to ' + recipient)
        modal.find('.modal-body input').val(recipient)
    })

    $("#oldPwd").blur(function () {
        var oldPwd = $(this).val();
        if ("" === oldPwd) {
            layer.tips('旧密码不为空！', '#oldPwd');
            old_flag = false;
        } else {
            old_flag = true;
        }
        $.post('/stuInfoSystem/checkOldPwd', {"oldPwd": oldPwd}, function (data) {
            if ("error" == data) {
                old_flag = false;
                layer.tips('密码错误,请输入正确的旧密码！', '#oldPwd');
            }
        }, "text");
        checkPwd();
    });

    $("#newPwd").blur(function () {
        if ("" === $(this).val()) {
            layer.tips('新密码不为空！', '#newPwd');
            new_flag = false;
        } else {
            new_flag = true;
        }
        checkPwd();
    });

    $("#repeatNewPwd").blur(function () {
        var newPwd = $("#newPwd").val();
        var reNewPwd = $(this).val();
        if ("" === $(this).val()) {
            layer.tips('重复密码不为空！', '#repeatNewPwd');
            reNew_flag = false;
        } else {
            reNew_flag = true;
        }
        if (reNewPwd === newPwd) {

        } else {
            layer.tips('两次密码输入不同,请重新输入！', '#repeatNewPwd');
        }
        checkPwd();
    });

    function checkPwd() {
        var newPwd = $("#newPwd").val();
        var reNewPwd = $("#repeatNewPwd").val();
        if (reNewPwd === newPwd) {
            if (old_flag && new_flag && reNew_flag) {
                $("#changePwdBtn").removeAttr("disabled");
            } else {
                $("#changePwdBtn").attr("disabled", "disabled");
            }
        } else {
            $("#changePwdBtn").attr("disabled", "disabled");
        }
    }

    // 修改密码
    $("#changePwdBtn").click(function (e) {
        e.preventDefault(); //阻止默认行为（表单提交）
        var newPwd = $("#newPwd").val();
        $.post('/stuInfoSystem/updatePwd', {"newPwd": newPwd}, function (data) {
            if ("ok" === data) {
                layer.msg('密码修改成功！', {icon: 6, time: 700});
                $("#closeModel").trigger("click");
            } else {
                layer.msg('密码修改失败！', {icon: 5, time: 700});
            }
        }, 'text');
    });

    // 修改个性签名
    $('#updateSignatureBtn').click(function (e) {
        e.preventDefault();
        var newSignature = $("#signature").val();
        $.post('/stuInfoSystem/updateSignature', {"newSignature": newSignature}, function (data) {
            if ("ok" === data) {
                $("#signatureCloseBtn").trigger("click");
                $("#oldSignature").val(newSignature);
                layer.msg('个性签名修改成功！', {icon: 6, time: 700});
            } else {
                layer.msg('个性签名修改失败！', {icon: 5, time: 700});
            }
        }, 'text');
    });

    // 修改我的爱好
    $('#updateHobbyBtn').click(function (e) {
        e.preventDefault();
        var newHobby = $("#hobby").val();
        $.post('/stuInfoSystem/updateHobby', {"newHobby": newHobby}, function (data) {
            if ("ok" === data) {
                $("#hobbyCloseBtn").trigger("click");
                $("#oldHobby").val(newHobby);
                layer.msg('爱好修改成功！', {icon: 6, time: 700});
            } else {
                layer.msg('爱好修改失败！', {icon: 5, time: 700});
            }
        }, 'text');
    });

</script>
</body>
</html>